import React from 'react';
import { useRef, useEffect, useState } from 'react';
import {  APILoader, Provider, useMap, useGeolocationControl } from '@uiw/react-baidu-map';
// import { NavBar } from 'antd-mobile';
const Example = () => {
  const divElm = useRef(null);
  const [show, setShow] = useState(true);
  const { setContainer, map } = useMap();
  const { geolocationControl } = useGeolocationControl({
    map, anchor:window.BMAP_NAVIGATION_CONTROL_LARGE, visiable: show
  });
//   const back = () => {
//     window.history.back(-1);
//  };
  useEffect(() => {
    if (divElm.current && !map) {
      setContainer(divElm.current);
    }
  }, [map]);
  return (
    <>
    <div>
    {/* <NavBar onBack={back}></NavBar> */}
    <div ref={divElm} style={{ height: 625 }} />   
    </div>
     
    </>
  );
}

const Demo = () => (
  <div style={{ width: '100%' }}>
    <APILoader akay="eYpCTECSntZmw0WyoQ7zFpCRR9cpgHFG">
      <Provider>
        <Example />
      </Provider>
    </APILoader>
  </div>
);
export default Demo;